<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1">
        <meta name="keywords" content="markdown,语法,">
        <meta name="description" content="为博客添加公式支持">
        <link rel="stylesheet" href="/bundle/index.css">
        <title>为博客添加公式支持</title>
    </head>
    <body>
        <article class="container">
            <a class="index" href="/">天问</a>
<ul class="menu">
    <li class="menu-item"><a href="/archive.html">归档</a></li>
    <li class="menu-item"><a href="/tag.html">标签</a></li>
    <li class="menu-item"><a href="/atom.xml">订阅</a></li>
</ul>

            <article class="main article">
                <h1 class="title">为博客添加公式支持</h1>
                <section class="info">
                    <span class="avatar" style="background-image: url(/images/me.gif);"></span>
                    <a class="name" href="/about.me.html">twtccw</a>
                    <span class="date" data-time="1450612330">
                        <span class="from"></span>
                        
                    </span>
                    <span class="tags"><a class="tag" href="/tag/markdown/index.html">markdown</a><a class="tag" href="/tag/%e8%af%ad%e6%b3%95/index.html">语法</a></span>
                </section>
                <article class="content"><h1><code>MathJax</code>简介</h1>

<p><code>MathJax</code>是一个用在浏览器上的<code>javascript</code>库，能够让网页显示非图片格式的公式，支持<code>LaTeX</code>语法，是基于<code>APache</code>协议的开源软件。
效果如下：</p>

<p>$ 表示行内公式：</p>

<p>质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。</p>

<p>$$ 表示整行公式：</p>

<p>$$\sum_{i=1}^n a_i=0$$</p>

<p>$$f(x_1,x_2,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$</p>

<h1>为博客添加<code>MathJax</code>支持的方法</h1>

<p>参照： <a href="http://blog.kamidox.com/write-math-formula-with-mathjax.html">http://blog.kamidox.com/write-math-formula-with-mathjax.html</a></p>

<p>因为每个页面都包含<code>header.html</code>或者<code>footer.html</code>，只需要在这两个页面中添加以下代码:
(<code>「纸小墨」</code>对应在theme目录里面)</p>

<pre><code class="language-javascript">&lt;!-- mathjax config similar to math.stackexchange --&gt;
&lt;script type=&quot;text/x-mathjax-config&quot;&gt;
MathJax.Hub.Config({
    jax: [&quot;input/TeX&quot;, &quot;output/HTML-CSS&quot;],
    tex2jax: {
        inlineMath: [ ['$', '$'] ],
        displayMath: [ ['$$', '$$']],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    messageStyle: &quot;none&quot;,
    &quot;HTML-CSS&quot;: { preferredFont: &quot;TeX&quot;, availableFonts: [&quot;STIX&quot;,&quot;TeX&quot;] }
});
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&quot;&gt;&lt;/script&gt;
</code></pre>

<p>即可在各个页面提供<code>MathJax</code>支持。</p>

<p><strong>以下为作业部落所作Markdown 简明语法手册，包含了多数我想测试的内容，目的是希望能够让自己的博客支持多种效果</strong></p>

<p><a href="https://www.zybuluo.com/mdeditor" title="作业部落旗下 Cmd 在线 Markdown 编辑阅读器">『Cmd 技术渲染的沙箱页面，点击此处编写自己的文档』</a></p>

<h1>Cmd Markdown 简明语法手册</h1>

<p>标签： Cmd-Markdown</p>

<hr />

<h3>1. 斜体和粗体</h3>

<p>使用 * 和 ** 表示斜体和粗体。</p>

<p>示例：</p>

<p>这是 <em>斜体</em> ，这是 <strong>粗体</strong>。</p>

<h3>2. 分级标题</h3>

<p>使用 === 表示一级标题，使用 &mdash; 表示二级标题。</p>

<p>示例：</p>

<pre><code>这是一个一级标题
============================

这是一个二级标题
--------------------------------------------------

### 这是一个三级标题
</code></pre>

<p>你也可以选择在行首加井号表示不同级别的标题 (H1-H6)，例如：# H1, ## H2, ### H3，#### H4。</p>

<h3>3. 外链接</h3>

<p>使用 [描述](链接地址) 为文字增加外链接。</p>

<p>示例：</p>

<p>这是去往 <a href="http://ghosertblog.github.com">本人博客</a> 的链接。</p>

<h3>4. 无序列表</h3>

<p>使用 *，+，- 表示无序列表。</p>

<p>示例：</p>

<ul>
<li>无序列表项 一</li>
<li>无序列表项 二</li>
<li>无序列表项 三</li>
</ul>

<h3>5. 有序列表</h3>

<p>使用数字和点表示有序列表。</p>

<p>示例：</p>

<ol>
<li>有序列表项 一</li>
<li>有序列表项 二</li>
<li>有序列表项 三</li>
</ol>

<h3>6. 文字引用</h3>

<p>使用 &gt; 表示文字引用。</p>

<p>示例：</p>

<blockquote>
<p>野火烧不尽，春风吹又生。</p>
</blockquote>

<h3>7. 行内代码块</h3>

<p>使用 `代码` 表示行内代码块。</p>

<p>示例：</p>

<p>让我们聊聊 <code>html</code>。</p>

<h3>8.  代码块</h3>

<p>使用 四个缩进空格 表示代码块。</p>

<p>示例：</p>

<pre><code>这是一个代码块，此行左侧有四个不可见的空格。
</code></pre>

<h3>9.  插入图像</h3>

<p>使用 ![描述](图片链接地址) 插入图像。</p>

<p>示例：</p>

<p><img src="/images/loader.gif" data-src="https://www.zybuluo.com/static/img/my_head.jpg" alt="我的头像" /></p>

<h1>Cmd Markdown 高阶语法手册</h1>

<h3>1. 内容目录</h3>

<p>在段落中填写 <code>[TOC]</code> 以显示全文内容的目录结构。</p>

<p>[TOC]</p>

<h3>2. 标签分类</h3>

<p>在编辑区任意行的列首位置输入以下代码给文稿标签：</p>

<p>标签： 数学 英语 Markdown</p>

<p>或者</p>

<p>Tags： 数学 英语 Markdown</p>

<h3>3. 删除线</h3>

<p>使用 ~~ 表示删除线。</p>

<p><del>这是一段错误的文本。</del></p>

<h3>4. 注脚</h3>

<p>使用 [^keyword] 表示注脚。</p>

<p>这是一个注脚[^footnote]的样例。</p>

<p>这是第二个注脚[^footnote2]的样例。</p>

<h3>5. LaTeX 公式</h3>

<p>$ 表示行内公式：</p>

<p>质能守恒方程可以用一个很简洁的方程式 $E=mc^2$ 来表达。</p>

<p>$$ 表示整行公式：</p>

<p>$$\sum_{i=1}^n a_i=0$$</p>

<p>$$f(x_1,x_2,\ldots,x_n) = x_1^2 + x_2^2 + \cdots + x_n^2 $$</p>

<p>访问 <a href="http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference">MathJax</a> 参考更多使用方法。</p>

<h3>6. 加强的代码块</h3>

<p>支持四十一种编程语言的语法高亮的显示，行号显示。</p>

<p>非代码示例：</p>

<pre><code>$ sudo apt-get install vim-gnome
</code></pre>

<p>Python 示例：</p>

<pre><code class="language-python">@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 &gt; param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None

class SomeClass:
    pass

&gt;&gt;&gt; message = '''interpreter
... prompt'''
</code></pre>

<p>JavaScript 示例：</p>

<pre><code class="language-javascript">/**
* nth element in the fibonacci series.
* @param n &gt;= 0
* @return the nth element, &gt;= 0.
*/
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n &gt;= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.write(fib(10));
</code></pre>

<h3>7. 流程图</h3>

<h4>示例</h4>

<pre><code class="language-flow">st=&gt;start: Start:&gt;https://www.zybuluo.com
io=&gt;inputoutput: verification
op=&gt;operation: Your Operation
cond=&gt;condition: Yes or No?
sub=&gt;subroutine: Your Subroutine
e=&gt;end

st-&gt;io-&gt;op-&gt;cond
cond(yes)-&gt;e
cond(no)-&gt;sub-&gt;io
</code></pre>

<h4>更多语法参考：<a href="http://adrai.github.io/flowchart.js/">流程图语法参考</a></h4>

<h3>8. 序列图</h3>

<h4>示例 1</h4>

<pre><code class="language-seq">Alice-&gt;Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob--&gt;Alice: I am good thanks!
</code></pre>

<h4>示例 2</h4>

<pre><code class="language-seq">Title: Here is a title
A-&gt;B: Normal line
B--&gt;C: Dashed line
C-&gt;&gt;D: Open arrow
D--&gt;&gt;A: Dashed open arrow
</code></pre>

<h4>更多语法参考：<a href="http://bramp.github.io/js-sequence-diagrams/">序列图语法参考</a></h4>

<h3>9. 表格支持</h3>

<table>
<thead>
<tr>
<th>项目</th>
<th align="right">价格</th>
<th align="center">数量</th>
</tr>
</thead>

<tbody>
<tr>
<td>计算机</td>
<td align="right">\$1600</td>
<td align="center">5</td>
</tr>

<tr>
<td>手机</td>
<td align="right">\$12</td>
<td align="center">12</td>
</tr>

<tr>
<td>管线</td>
<td align="right">\$1</td>
<td align="center">234</td>
</tr>
</tbody>
</table>

<h3>10. 定义型列表</h3>

<dl>
<dt>名词 1</dt>
<dd>定义 1（左侧有一个可见的冒号和四个不可见的空格）</dd>
<dt>代码块 2</dt>
<dd><p>这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）</p>

<pre><code>代码块（左侧有八个不可见的空格）
</code></pre></dd>
</dl>

<h3>11. Html 标签</h3>

<p>本站支持在 Markdown 语法中嵌套 Html 标签，譬如，你可以用 Html 写一个纵跨两行的表格：</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
        &lt;th rowspan=&quot;2&quot;&gt;值班人员&lt;/th&gt;
        &lt;th&gt;星期一&lt;/th&gt;
        &lt;th&gt;星期二&lt;/th&gt;
        &lt;th&gt;星期三&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;李强&lt;/td&gt;
        &lt;td&gt;张明&lt;/td&gt;
        &lt;td&gt;王平&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

<h3>12. 内嵌图标</h3>

<p>本站的图标系统对外开放，在文档中输入</p>

<pre><code>&lt;i class=&quot;icon-weibo&quot;&gt;&lt;/i&gt;
</code></pre>

<p>即显示微博的图标： <i class="icon-weibo icon-2x"></i></p>

<p>替换 上述 <code>i 标签</code> 内的 <code>icon-weibo</code> 以显示不同的图标，例如：</p>

<pre><code>&lt;i class=&quot;icon-renren&quot;&gt;&lt;/i&gt;
</code></pre>

<p>即显示人人的图标： <i class="icon-renren icon-2x"></i></p>

<p>更多的图标和玩法可以参看 <a href="http://fortawesome.github.io/Font-Awesome/3.2.1/icons/">font-awesome</a> 官方网站。</p>

<h3>13. 待办事宜 Todo 列表</h3>

<p>使用带有 [ ] 或 [x] （未完成或已完成）项的列表语法撰写一个待办事宜列表，并且支持子列表嵌套以及混用Markdown语法，例如：</p>

<pre><code>- [ ] **Cmd Markdown 开发**
    - [ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
    - [ ] 支持以 PDF 格式导出文稿
    - [x] 新增Todo列表功能 [语法参考](https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments)
    - [x] 改进 LaTex 功能
        - [x] 修复 LaTex 公式渲染问题
        - [x] 新增 LaTex 公式编号功能 [语法参考](http://docs.mathjax.org/en/latest/tex.html#tex-eq-numbers)
- [ ] **七月旅行准备**
    - [ ] 准备邮轮上需要携带的物品
    - [ ] 浏览日本免税店的物品
    - [x] 购买蓝宝石公主号七月一日的船票
</code></pre>

<p>对应显示如下待办事宜 Todo 列表：</p>

<h1>Cmd Markdown 开发</h1>

<ul>
<li>[ ] 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率</li>
<li>[ ] 支持以 PDF 格式导出文稿</li>
<li>[x] 新增Todo列表功能 <a href="https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments">语法参考</a></li>

<li><p>[x] 改进 LaTex 功能</p>

<ul>
<li>[x] 修复 LaTex 公式渲染问题</li>

<li><p>[x] 新增 LaTex 公式编号功能 <a href="http://docs.mathjax.org/en/latest/tex.html#tex-eq-numbers">语法参考</a></p>

<h1>七月旅行准备</h1></li>

<li><p>[ ] 准备邮轮上需要携带的物品</p></li>

<li><p>[ ] 浏览日本免税店的物品</p></li>

<li><p>[x] 购买蓝宝石公主号七月一日的船票</p></li>
</ul></li>
</ul>

<p>[^footnote]: 这是一个 <em>注脚</em> 的 <strong>文本</strong>。</p>

<p>[^footnote2]: 这是另一个 <em>注脚</em> 的 <strong>文本</strong>。</p>

<p>作者 <a href="http://weibo.com/ghosert">@ghosert</a><br />
2015 年 06月 15日</p>
</article>
                <section class="author">
                    <div class="avatar" style="background-image: url(/images/me.gif);"></div>
                    <a class="name" href="/about.me.html">twtccw</a>
                    <div class="intro">现已装备物理学圣剑</div>
                </section>
                <section class="recommend">
                    
                    <section class="nav prev more">
                        <div class="head">上篇文章</div>
                        <a class="link" href="/post/2016/03/19/python.html">Linux下配置python工作环境</a>
                    </section>
                    
                    
                    <section class="nav next more">
                        <div class="head">下篇文章</div>
                        <a class="link" href="/post/2015/11/30/first.html">Linux下生产力软件推荐</a>
                    </section>
                    
                </section>
                <section id="disqus_thread"></section>
            </article>
        </article>
        <footer class="footer">
    <span class="license">
        <a rel="license" href="//creativecommons.org/licenses/by/4.0/" title="Creative Commons Attribution 4.0 International license">
          <img src="/images/cc88X31.png" alt="License" data-pin-nopin="true" />
        </a>
    </span>
    <span class="copyright">
        天问 ©
        <script type="text/javascript">
            document.write(new Date().getFullYear());
        </script>
    </span>
    <span class="publish">Powered by <a href="http://www.inkpaper.io/" target="_blank">Ink</a></span>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
        inlineMath: [ ['$', '$'] ],
        displayMath: [ ['$$', '$$']],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    messageStyle: "none",
    "HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] }
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</footer>

        <script src="/bundle/index.js"></script>
    </body>
    <script type="text/javascript">
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//twtccw.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
</html>
